<template>
  <div class="container">
    <div class="keywords-tips">当检测到车辆「客户姓名」含 关键词 时，列为公户车，对应车辆不纳入监控范围；且公户车辆中含  监控关键词 的车辆仍需纳入监控</div>
    <div class="title">公户车辆关键词设置<span>(输入关键词后点击回车暂存单个关键字)</span></div>
    <div class="keyWords">
      <div class="lable">关键词：</div>
      <div class="contents">
        <div class="inputContainer">
          <div class="tags">
            <el-tag
              v-for="tag in keyWords.tags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag, 'keyWords')"
            >
              {{ tag }}
            </el-tag>
          </div>
          <el-input v-model.trim="keyWords.value" type="textarea" placeholder="请输入关键词" @keydown.enter.native="handleInputConfirm($event, 'keyWords', 'monitoringKeyWords')" />
        </div>
        <div class="history">
          <el-tag
            v-for="(tag, index) in keyWords.history"
            :key="tag"
            style="cursor: pointer;"
            @click="setKeyWords('keyWords', index)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>
    <div class="keyWords">
      <div class="lable">监控关键词：</div>
      <div class="contents">
        <div class="inputContainer">
          <div class="tags">
            <el-tag
              v-for="tag in monitoringKeyWords.tags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag, 'monitoringKeyWords')"
            >
              {{ tag }}
            </el-tag>
          </div>
          <el-input v-model.trim="monitoringKeyWords.value" type="textarea" placeholder="请输入监控关键词" @keydown.enter.native="handleInputConfirm($event, 'monitoringKeyWords', 'keyWords')" />
        </div>
        <div class="history">
          <el-tag
            v-for="(tag, index) in monitoringKeyWords.history"
            :key="tag"
            style="cursor: pointer;"
            @click="setKeyWords('monitoringKeyWords', index)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>
    <div class="actions">
      <el-button type="primary" :loading="loading" @click="handleSave">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { addWhiteListVehicle, detailWhiteListVehicle } from '@/api/crossRegionalMonitoring'
export default {
  name: 'CarWhite',
  data() {
    return {
      keyWords: {
        value: '',
        tags: [],
        history: []
      },
      monitoringKeyWords: {
        value: '',
        tags: [],
        history: []
      },
      loading: false
    }
  },
  created() {
    this.queryDetailWhiteListVehicle()
  },
  methods: {
    async queryDetailWhiteListVehicle() {
      const { data } = await detailWhiteListVehicle()
      const items = data.data
      const { keywordList, historyKeywordList, monitorKeywordList, historyMonitorKeywordList } = items
      this.keyWords.tags = keywordList
      this.keyWords.history = historyKeywordList
      this.monitoringKeyWords.tags = monitorKeywordList
      this.monitoringKeyWords.history = historyMonitorKeywordList
    },
    handleClose(tag, key) {
      this[key].tags.splice(this[key].tags.indexOf(tag), 1)
    },
    handleInputConfirm(event, key, targetKey) {
      event.preventDefault()
      const inputValue = this[key].value
      if (inputValue) {
        // 判断相同类型的关键词是否有重复的
        const isSome = this[key].tags.some(item => item === inputValue)
        if (isSome) return this.$message.error('重复关键词，请重新输入')
        // 判断不通类型的关键词是否有重复的
        const isRepeat = this[targetKey].tags.some(item => item === inputValue)
        if (isRepeat) return this.$message.error('关键词和监控关键词有重复项，请重新输入')
        this[key].tags.push(inputValue)
      }
      this[key].value = ''
    },
    handleSave() {
      const params = {
        keywordList: this.keyWords.tags,
        monitorKeywordList: this.monitoringKeyWords.tags
      }
      if (!params.keywordList.length) return this.$message({ type: 'error', message: '请填写关键词' })
      if (!params.monitorKeywordList.length) return this.$message({ type: 'error', message: '请填写监控关键词' })
      this.loading = true
      addWhiteListVehicle(params).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.queryDetailWhiteListVehicle()
      }).finally(() => {
        this.loading = false
      })
    },
    setKeyWords(key, index) {
      const { tags, history } = this[key]
      const currentClickTags = history[index]
      if (tags.some(item => item === currentClickTags)) return false
      tags.push(currentClickTags)
      history.splice(index, 1)
      this[key].tags = tags
      this[key].history = history
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    .keywords-tips{
        line-height: 50px;
        background-color: rgba(242, 242, 242, 1);
        border-radius: 6px;
        padding: 0 20px;
    }
    .title{
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
        font-weight: 650;
        font-style: normal;
        font-size: 16px;
        color: #333;
        line-height: 100px;
        span{
          color: #f13131;
          font-size: 13px;
          margin-left:5px;
        }
    }
    .keyWords, .monitoringKeyWords{
        display: flex;
        margin-bottom: 20px;
        .lable{
            width: 120px;
            text-align: right;
        }
        .contents{
            width: calc(100% - 120px);
        }
        .inputContainer{
            display: flex;
            border-radius: 5px;
            border: 1px solid #e8e8e8;
            box-sizing: border-box;
            padding: 10px;
            .tags{
                display: flex;
                max-width: 400px;
                flex-wrap: wrap;
                .el-tag{
                    margin-bottom: 10px;
                    margin-right: 5px;
                }
            }
            ::v-deep .el-textarea__inner{
                border: none;
                height: 100%;
            }
        }
        .history{
            margin: 20px 0;
            .el-tag{
                margin-bottom: 10px;
                margin-right: 5px;
            }
        }
    }
    .actions{
      text-align: center;
      line-height: 100px;
    }
  }
</style>
